<template>
    <div class="pendChartFour" v-if="this.$store.state.schoolAuthority.CountTime">
        <Row type="flex" justify="center">
            <span class="title">用时统计</span>
        </Row>
        <Row type="flex" justify="center">
            <div class="biankuang" v-if="avgTime">
                <div class="contnet">
                    <div v-if="avgTime[0]">{{avgTime[0]}}天</div>
                    <div>{{avgTime[1]}}</div>
                    <div class="avn">平均用时</div>
                </div>
            </div>
        </Row>
        <div class="foot" v-if="this.$store.state.schoolAuthority.CountTime">
            <div>
                <div class="foot-area">
                    <span class="tag" style="background-color: #69cffa"></span>
                    <span class="text-one">平均用时</span>
                    <span class="text-two">{{Time.TIME_AVG}}</span>
                </div>
                <div class="foot-area">
                    <span class="tag" style="background-color: #fbc942"></span>
                    <span class="text-one">最快用时</span>
                    <span class="text-two">{{Time.TIME_MIN}}</span>
                </div>
                <div class="foot-area">
                    <span class="tag" style="background-color: #ff8040"></span>
                    <span class="text-one">最长用时</span>
                    <span class="text-two">{{Time.TIME_MAX}}</span>
                </div>
            </div>
        </div>
    </div>
    <div class="nodata" v-else>
        <img src="static/staff/nodate.png">
        <br>
        <br>
        <div class="text">用时统计暂无数据</div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            schoolAuthority: this.$store.state.schoolAuthority,
        }
    },
    components: {
    },
    computed: {
        Time() {
            try {
                return this.$store.state.schoolAuthority.CountTime
            } catch (Error) {
                return
            }
        },
        avgTime() {
            try {
                if (this.$store.state.schoolAuthority.CountTime.TIME_AVG.indexOf('天') > -1) {
                    return this.$store.state.schoolAuthority.CountTime.TIME_AVG.split('天')
                } else {
                    return ['', this.$store.state.schoolAuthority.CountTime.TIME_AVG]
                }
            } catch (Error) {
                return
            }
        }
    }
}
</script>

<style lang="less">
.pendChartFour {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 70vh;
    background-color: #fff;
    .title {
        color: rgb(45, 140, 240);
        font-size: 16px;
    }
    .biankuang {
        width: 200px;
        height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 100%;
        border-left: 3px solid #ff8040;
        border-top: 3px solid #ff8040;
        border-right: 3px solid #69cffa;
        border-bottom: 3px solid #fbc942;
        .contnet {
            font-size: 20px;
            font-weight: bolder;
            color: #2d8cf0;
            text-align: center;
            .avn {
                margin: 10px 0 0 0;
                font-size: 14px;
                color: #727272;
            }
        }
    }
    .foot{
        display: flex;
        // flex-direction: column;
        justify-content: center;
        align-items: center;
        .foot-area {
            margin-bottom: 20px;
            .tag {
                display: inline-block;
                width: 10px;
                height: 10px;
                border-radius: 3px;
            }
            .text-one {
                padding: 0 5px;
                font-size: 14px;
                font-weight: bolder;
            }
            .text-two {
                font-size: 14px;
                color: #2d8cf0;
            }
        }
    }
}
</style>
